<template>
  <div class="crumb">
    <div class="crumb-content">
      <router-link to="/index">MyStore</router-link>
      <span>></span>
      <span class="link-text">newOrder</span>
    </div>
  </div>

  <div class="order">
    <div class="panel">
      <form action="" method="post" id="newOrderForm">
        <table class="order-table">
          <tr>
            <th colspan=2 align="center">Payment Details</th>
          </tr>
          <tr>
            <td>Card Type:</td>
            <td>
              <select v-model="cardType">
                <option value="Visa">Visa</option>
                <option value="MasterCard">MasterCard</option>
                <option value="American Express">American Express</option>
                <option value="Wechat">Wechat</option>
                <option value="Alipay">Alipay</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Card Number:</td>
            <td>
              <input type="text" name="creditCard" v-model="creditCardNumber">
              * Use a fake number!
            </td>
          </tr>
          <tr>
            <td>Expiry Date (MM/YYYY):</td>
            <td>
              <input type="text" name="expiryDate" v-model="expiryDate">
            </td>
          </tr>
          <tr>
            <th colspan=2 align="center">Billing Address</th>
          </tr>
          <tr>
            <td>First name:</td>
            <td>
              <input type="text" name="billToFirstName" v-model="firstName">
            </td>
          </tr>
          <tr>
            <td>Last name:</td>
            <td>
              <input type="text" name="billToLastName" v-model="lastName">
            </td>
          </tr>
          <tr>
            <td>Address 1:</td>
            <td>
              <input type="text" size="40" name="billAddress1" v-model="address1">
            </td>
          </tr>
          <tr>
            <td>Address 2:</td>
            <td>
              <input type="text" size="40" name="billAddress2" v-model="address2">
            </td>
          </tr>
          <tr>
            <td>City:</td>
            <td>
              <input type="text" name="billCity" v-model="city">
            </td>
          </tr>
          <tr>
            <td>State:</td>
            <td>
              <input type="text" size="4" name="billState"  v-model="state">
            </td>
          </tr>
          <tr>
            <td>Zip:</td>
            <td>
              <input type="text" size="10" name="billZip"  v-model="zip">
            </td>
          </tr>
          <tr>
            <td>Country:</td>
            <td>
              <input type="text" size="15" name="billCountry" v-model="country">
            </td>
          </tr>
          <tr>
            <td colspan=2>
              <input type="checkbox" name="shippingAddressRequired">
              Ship to different address...</td>
          </tr>
          <div class="button-container">
            <button @click.prevent="confirmOrder">Continue</button>
          </div>
        </table>
      </form>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import {defineComponent} from 'vue'
import Top from '@/components/common/nav-head.vue';
import Bottom from '@/components/common/bottom.vue';
export default defineComponent({
  name:"new-order",
  methods : {
    confirmOrder() {
      this.checkContent();
      if(!this.cardTypeValid) {
        alert('Please select your cardType!');
        return;
      } else if(!this.creditCardNumberValid) {
        alert('Please enter your creditCardNumber!');
        return;
      } else if(!this.expiryDateValid) {
        alert('Please enter your expiryDate!');
        return;
      } else if(!this.firstNameValid) {
        alert('Please enter your first name!');
        return;
      } else if(!this.lastNameValid) {
        alert('Please enter your last name!');
        return;
      } else if(!this.address1Valid) {
        alert('Please enter your address1!');
        return;
      } else if(!this.address2Valid) {
        alert('Please enter your address2!');
        return;
      } else if(!this.cityValid) {
        alert('Please enter your city!');
        return;
      } else if(!this.stateValid) {
        alert('Please enter your state!');
        return;
      } else if(!this.zipValid) {
        alert('Please enter your zip!');
        return;
      } else if(!this.countryValid) {
        alert('Please enter your country!');
        return;
      }
      sessionStorage.setItem('cardType', JSON.stringify(this.cardType.toString));
      sessionStorage.setItem('creditCardNumber', JSON.stringify(this.creditCardNumber));
      sessionStorage.setItem('expiryDate', JSON.stringify(this.expiryDate));
      sessionStorage.setItem('firstName', JSON.stringify(this.firstName));
      sessionStorage.setItem('lastName', JSON.stringify(this.lastName));
      sessionStorage.setItem('address1', JSON.stringify(this.address1));
      sessionStorage.setItem('address2', JSON.stringify(this.address2));
      sessionStorage.setItem('city', JSON.stringify(this.city));
      sessionStorage.setItem('state', JSON.stringify(this.state));
      sessionStorage.setItem('zip', JSON.stringify(this.zip));
      sessionStorage.setItem('country', JSON.stringify(this.country));
      router.push('/confirm-order')
    },
    checkContent() {
      this.cardTypeValid = (this.cardType !== '')
      this.creditCardNumberValid = (this.creditCardNumber !== '')
      this.expiryDateValid = (this.expiryDate !== '')
      this.firstNameValid = (this.firstName !== '')
      this.lastNameValid = (this.lastName !== '')
      this.address1Valid = (this.address1 !== '')
      this.address2Valid = (this.address2 !== '')
      this.cityValid = (this.city !== '')
      this.stateValid = (this.state !== '')
      this.zipValid = (this.zip !== '')
      this.countryValid = (this.country !== '')
    }
  },
  components: {
    Top,
    Bottom
  },
  data() {
    return {
      cardType: 'Visa', cardTypeValid: false,
      creditCardNumber: '999 9999 9999 9999', creditCardNumberValid: false,
      expiryDate: '12/03', expiryDateValid: false,
      firstName: 'ABC', firstNameValid: false,
      lastName: 'XYX', lastNameValid: false,
      address1: '901 San Antonio Road', address1Valid: false,
      address2: 'MS UCUP02-206', address2Valid: false,
      city: 'Palo Alto', cityValid: false,
      state: 'CA', stateValid: false,
      zip: '94303', zipValid: false,
      country: 'USA', countryValid: false,
      currentOrder: {}, currentOrderValid: false,
      formattedDate: "", formattedDateValid: false,
    };
  },
  mounted() {

  }
})
</script>

<style src="@/assets/OrderPage/order.css"></style>